<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>关键帧动画</title>
	<style>
		div {
			width: 200px;
			background-color: #663399;
			margin: 2em;
			padding: 1px 2em 1px 2em;
		}

		.logo {
			color: #fff;
			font-family: Helvetica Neue, Arial, sans-serif;
			font-size: 2em;
		}

		.box-outer {
			display: inline-block;
		}

		.box-inner {
			display: inline-block;
			width: .74em;
			height: .74em;
			background-color: #fff;
		}

		@keyframes roll {
			from {
				transform: translateX(-100%);
				animation-timing-function: ease-in-out;
			}

			20% {
				transform: translateX(-100%) skewX(15deg);
			}

			28% {
				transform: translateX(-100%) skewX(0deg);
			}

			45% {
				transform: translateX(-100%) skewX(-5deg) rotate(20deg) scaleY(1.1);
				animation-timing-function: ease-in-out;
			}

			50% {
				transform: translateX(-100%) skewX(45deg) scaleY(1.1);
				animation-timing-function: ease-in;
			}

			60% {
				transform: translateX(-100%) rotate(90deg);
			}

			65% {
				transform: translateX(-100%) rotate(90deg) skewY(10deg);
			}

			70% {
				transform: translateX(-100%) rotate(90deg) skewY(0deg);
			}

			to {
				transform: translateX(-100%) rotate(90deg);
			}
		}

		.box-inner {
			animation-name: roll;
			animation-duration: 1.5s;
			animation-delay: 1s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			/*等于
		animation: roll 1.5s 1s 3 linear;*/
			transform-origin: bottom right;
		}

		@keyframes shift {
			form {
				transform: translateX(-300%);
			}
		}

		.box-outer {
			display: inline-block;
			animation: shift 4.5s 1s steps(infinite, start) backwards;
		}
	</style>
</head>

<body>
	<div>
		<h1 class="logo">
			<span class="box-outer"><span class="box-inner"></span></span>
			<span class="logo-box">Box</span>
			<span class="logo-model">model</span>
		</h1>
	</div>
</body>

</html>